<template>
  <div class="comment-component">
<!--    图表区域-->
    <div class="charts-area">
      <div class="comment-score" ref="commentScoreRef"></div>
      <div class="comment-good-type" ref="commentGoodTypeRef"></div>
    </div>
<!--    卡片区域-->
    <el-card class="box-card">
<!--      表单筛选区域-->
      <el-form :inline="true" :model="filterCommentForm" ref="commentFilterRef" class="demo-form-inline">
        <el-form-item label="评价类型" prop="cuurentCommentType">
          <el-select v-model="filterCommentForm.cuurentCommentType">
            <el-option value="好评"></el-option>
            <el-option value="中评"></el-option>
            <el-option value="差评"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前商品" prop="currentGoodName">
          <el-input v-model="filterCommentForm.currentGoodName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getNewRenderCommentList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetFilterForm">重置</el-button>
        </el-form-item>
      </el-form>
<!--      表格区域-->
      <el-table
        :data="readyToRenderCommentList"
        style="width: 100%">
        <el-table-column
          prop="commentid"
          label="评论id"
          width="80">
        </el-table-column>
        <el-table-column
          prop="goodsname"
          label="商品名"
          min-width="400">
        </el-table-column>
        <el-table-column
          prop="choicename"
          label="商品属性">
        </el-table-column>
        <el-table-column
          prop="content"
          label="评论内容"
          min-width="400">
        </el-table-column>
        <el-table-column
          label="商品属性">
          <template v-slot:default="scope">
            {{ scope.row.score }} / 5
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Comment',
  created() {
    this.getMerchantComment()
  },
  data() {
    return {
      // 存储当前商家的评论列表
      merchantCommentList: [],
      // 渲染至界面上的评价列表
      readyToRenderCommentList: [],
      // 筛选评论信息的表单对象
      filterCommentForm: {
        // 评价类型
        cuurentCommentType: '',
        // 当前商品的名字
        currentGoodName: ''
      }
    }
  },
  methods: {
    // 获取该商家的评论信息
    async getMerchantComment() {
      if (!sessionStorage.getItem('id')) return this.$message.error('状态异常')
      const { data: res } = await this.$http.get('/merchant/comment', {
        params: {
          mid: sessionStorage.getItem('id')
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取商家评论失败')
      this.merchantCommentList = res.recordset
      this.readyToRenderCommentList = res.recordset
      let haoping = 0
      let zhongping = 0
      let chaping = 0
      this.merchantCommentList.forEach(item => {
        if (item.score >= 4) {
          haoping++
        } else if (item.score === 3) {
          zhongping++
        } else {
          chaping++
        }
      })
      console.log(haoping, zhongping, chaping)
      this.renderCommentScoreChart(haoping, zhongping, chaping)
    },
    // 渲染好评中评差评占比
    renderCommentScoreChart(h, z, c) {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        color: ['green', 'skyblue', 'red'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'normal'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: h, name: '好评' },
              { value: z, name: '中评' },
              { value: c, name: '差评' }
            ]
          }
        ]
      }
      echarts.init(this.$refs.commentScoreRef).setOption(option)
    },
    // 查询按钮被点击时 生成新的满足用户填写的评论列表
    getNewRenderCommentList() {
      if (this.filterCommentForm.cuurentCommentType) {
        switch (this.filterCommentForm.cuurentCommentType) {
          case '好评':
            console.log('ok')
            this.readyToRenderCommentList = this.merchantCommentList.filter(item => item.score >= 4)
            break
          case '中评':
            this.readyToRenderCommentList = this.merchantCommentList.filter(item => item.score === 3)
            break
          case '差评':
            this.readyToRenderCommentList = this.merchantCommentList.filter(item => item.score <= 2)
            break
        }
      }
      if (this.filterCommentForm.currentGoodName) {
        this.readyToRenderCommentList = this.merchantCommentList.filter(item => item.goodsname.includes(this.filterCommentForm.currentGoodName))
      }
    },
    // 当重置按钮被点击时触发 重置评论列表筛选表单
    resetFilterForm() {
      this.$refs.commentFilterRef.resetFields()
      this.readyToRenderCommentList = this.merchantCommentList
    }
  }
}
</script>

<style scoped lang="less">
.charts-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 350px;
  .comment-score,
  .comment-good-type {
    width: 25%;
    height: 100%;
  }
}
</style>
